<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>控件绑定</title>
	<script src="lib/vue-2.1.3-min.js"></script>
	<script src="lib/lodash.min.js"></script>
</head>
<body>
	<div id="example-1">
		<h1>单行文本</h1>
		<input type="text" v-model="text" placeholder="edit me">
		<p>{{text}}</p>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-1", 
			data: {
				text: null
			}
		})
	</script>

	<div id="example-2">
		<h1>多行文本</h1>
		<textarea v-model="multext" cols="30" rows="10"></textarea>
		<p style="white-space: pre">{{multext}}</p>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-2", 
			data: {
				multext: null
			}
		})
	</script>

	<div id="example-checkbox">
		<h1>复选框</h1>
		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{checked}}</label>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-checkbox", 
			data: {
				checked: false
			}
		})
	</script>

	<div id="example-checkbox-array">
		<h1>复选框绑定到数组</h1>
		<input type="checkbox" id="checkbox" value="vue js" v-model="checkedNames"><br/>
		<input type="checkbox" id="checkbox" value="angular js" v-model="checkedNames"><br/>
		<input type="checkbox" id="checkbox" value="react js" v-model="checkedNames"><br/>
		<input type="checkbox" id="checkbox" value="knockout js" v-model="checkedNames"><br>
		<label for="checkbox">{{checkedNames}}</label>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-checkbox-array", 
			data: {
				checkedNames: ["vue js"]
			}
		})
	</script>

	<div id="example-radio">
		<h1>单选radio</h1>
		<input type="radio" value="vue js" v-model="type"><br>
		<input type="radio" value="react js" v-model="type"><br>
		
		<label for="checkbox">{{type}}</label>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-radio", 
			data: {
				type: null
			}
		})
	</script>

	<div id="example-select">
		<h1>单选列表</h1>
		<select name="types" v-model="type">
			<option value=""></option>
			<option value="vuejs">vuejs</option>
			<option value="reactjs">reactjs</option>
		</select>
		<label for="checkbox">{{type}}</label>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-select", 
			data: {
				type: null
			}
		})
	</script>

	<div id="example-select-multiple">
		<h1>多选列表</h1>
		<select name="types" v-model="types" multiple>
			<option value="vuejs">vuejs</option>
			<option value="reactjs">reactjs</option>
		</select>
		<label for="checkbox">{{types}}</label>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-select-multiple", 
			data: {
				types: ["vuejs"]
			}
		})
	</script>


	<div id="example-modifier">
		<h1>修饰符</h1>

		<h2>lazy</h2>
		<input type="text" v-model.lazy="number">
		<span>{{number}}</span>

		<h2>number</h2>
		<input type="number" v-model.number="number2">
		<span>{{number2}}</span>

		<h2>trim</h2>
		<input type="text" v-model.number="number3">
		<span>{{number3}}</span>
	</div>
	<script>
		var vm = new Vue({
			el: "#example-modifier", 
			data: {
				number:0,
				number2:0,
				number3:0
			}
		})
	</script>
</body>
</html>